<?php

use App\Livewire\Actions\Logout;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Session;

use function Livewire\Volt\layout;

layout('layouts.main');

$sendVerification = function () {
    if (Auth::user()->hasVerifiedEmail()) {
        $this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);

        return;
    }

    Auth::user()->sendEmailVerificationNotification();

    Session::flash('status', 'verification-link-sent');
};

$logout = function (Logout $logout) {
    $logout();

    $this->redirect('/', navigate: true);
};

?>

<x-slot name="breadcrumbs">
    <li>
        <a href="#">首页</a>
    </li>
        <li class="breadcrumbs-separator">/</li>
    <li>
        <b>仪表盘</b>
    </li>
</x-slot>

<div class="grid grid-cols-3 px-6 gap-8 pb-8">
    <div class="lg:col-span-2 col-span-full">
    <div class="stats w-full border border-base-content/10">
  <div class="stat">
    <div class="stat-figure text-base-content size-8">
      <span class="icon-[tabler--world] size-8"></span>
    </div>
    <div class="stat-title">网站浏览量</div>
    <div class="stat-value">32K</div>
    <div class="stat-desc">较上周增长5%</div>
  </div>

  <div class="stat">
    <div class="stat-figure text-base-content size-8">
      <span class="icon-[tabler--users-group] size-8"></span>
    </div>
    <div class="stat-title">新注册</div>
    <div class="stat-value">1.2K</div>
    <div class="stat-desc">本月增长12%</div>
  </div>

  <div class="stat">
    <div class="stat-figure size-12">
      <div class="avatar">
        <div class="size-12 rounded-full">
          <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png" alt="User Avatar"/>
        </div>
      </div>
    </div>
    <div class="stat-value text-success">95%</div>
    <div class="stat-title">任务完成度</div>
    <div class="stat-desc">非常棒，继续保持！^_^</div>
  </div>
</div>
    </div>
    <div class="card border border-base-content/10 col-span-full lg:col-span-1 row-span-2">
        <div class="card-body lg:h-1">
            <h2 class="card-title">最近发生</h2>
        <ul class="timeline timeline-snap-icon timeline-compact timeline-vertical w-full vertical-scrollbar">
  
  <!-- timeline item 1-->
  <li>
    <div class="timeline-middle">
        <div class="avatar">
          <div class="size-6 rounded-full">
            <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" aria-label="User Avatar" />
          </div>
        </div>
    </div>
    <div class="timeline-end ms-2 m-3 w-full rounded-lg">
        <div class="text-base-content/90 pt-0.5 mb-3 font-medium">
            <b>已支付新订单</b>
            <span class="text-xs">17分钟前</span>
        </div>
      <p class="mb-2">7件商品合计47.3美元</p>
      <button class="btn btn-xs btn-soft btn-primary">
        查看订单详情
      </button>
    </div>
    <hr />
  </li>
  <!-- /timeline item 1-->
  
  <!-- timeline item 2-->
  <li>
    <div class="timeline-middle">
        <div class="avatar">
          <div class="size-6 rounded-full">
            <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" aria-label="User Avatar" />
          </div>
        </div>
    </div>
    <div class="timeline-end ms-2 m-3 w-full rounded-lg">
        <div class="text-base-content/90 pt-0.5 mb-3 font-medium">
            <b>新用户注册</b>
            <span class="text-xs">20分钟前</span>
        </div>
      <a class="flex gap-2 group" href="#">
        <div class="avatar">
          <div class="size-8 rounded-full">
            <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" aria-label="User Avatar" />
          </div>
        </div>
        <div class="text-sm">
          <b class="">流浪的兔子</b>
          <p class="text-xs">1828955475</p>
        </div>
        
      </a>
    </div>
    <hr />
  </li>
  <!-- /timeline item 2-->
  
  <!-- timeline item 3-->
  <li>
    <div class="timeline-middle">
        <div class="avatar">
          <div class="size-6 rounded-full">
            <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" aria-label="User Avatar" />
          </div>
        </div>
    </div>
    <div class="timeline-end ms-2 m-3 w-full rounded-lg">
        <div class="text-base-content/90 pt-0.5 mb-3 font-medium">
            <b>拼团成功</b>
            <span class="text-xs">1小时前</span>
        </div>
      <p class="mb-2">6个用户</p>
      <div class="avatar-group pull-up -space-x-4 rtl:space-x-reverse">
        <div class="avatar">
          <div class="w-8">
            <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" aria-label="User Avatar" />
          </div>
        </div>
        <div class="avatar">
          <div class="w-8">
            <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png" aria-label="User Avatar" />
          </div>
        </div>
        <div class="avatar">
          <div class="w-8">
            <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-4.png" aria-label="User Avatar" />
          </div>
        </div>
        <div class="avatar placeholder">
          <div class="bg-neutral text-neutral-content w-8">
            <span>+3</span>
          </div>
        </div>
      </div>
    </div>
    <hr />
  </li>
  <!-- /timeline item 3-->
     <!-- timeline item 1-->
  <li>
    <div class="timeline-middle">
      <span class="bg-primary/20 flex size-4.5 items-center justify-center rounded-full">
        <span class="badge badge-primary size-3 rounded-full p-0"></span>
      </span>
    </div>
    <div class="timeline-end ms-2 m-3 w-full rounded-lg">
      <div class="text-base-content/90 pt-0.5 mb-3 font-medium">12 Invoices have been paid</div>
      <p class="mb-2">Invoices have been paid to the company</p>
      <button class="btn btn-sm btn-soft btn-secondary">
        <span class="icon-[tabler--file-type-pdf] text-error"></span>
        invoices.pdf
      </button>
    </div>
    <hr />
  </li>
  <!-- /timeline item 1-->
  
  <!-- timeline item 2-->
  <li>
    <div class="timeline-middle">
        <span class="bg-primary/20 flex size-4.5 items-center justify-center rounded-full">
            <span class="badge badge-primary size-3 rounded-full p-0"></span>
        </span>
    </div>
    <div class="timeline-end ms-2 m-3 w-full rounded-lg">
      <div class="text-base-content/90 pt-0.5 mb-3 font-medium">Client meeting</div>
      <p class="mb-2">Project meeting with john @10:15am</p>
      <div class="flex gap-2">
        <div class="avatar">
          <div class="size-8 rounded-full">
            <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" aria-label="User Avatar" />
          </div>
        </div>
        <div class="text-sm">
          <p class="font-medium">Lester McCarthy (Client)</p>
          <p>CEO of ThemeSelection</p>
        </div>
        
      </div>
      <p class="mt-2 text-xs">March 31, 2024</p>
    </div>
    <hr />
  </li>
  <!-- /timeline item 2-->
  
  <!-- timeline item 3-->
  <li>
    <div class="timeline-middle">
        <span class="bg-primary/20 flex size-4.5 items-center justify-center rounded-full">
            <span class="badge badge-primary size-3 rounded-full p-0"></span>
        </span>
    </div>
    <div class="timeline-end ms-2 m-3 w-full rounded-lg">
      <div class="text-base-content/90 pt-0.5 mb-3 font-medium">Create a new project for client</div>
      <p class="mb-2">6 team members in a project</p>
      <div class="avatar-group pull-up -space-x-4 rtl:space-x-reverse">
        <div class="avatar">
          <div class="w-8">
            <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" aria-label="User Avatar" />
          </div>
        </div>
        <div class="avatar">
          <div class="w-8">
            <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png" aria-label="User Avatar" />
          </div>
        </div>
        <div class="avatar">
          <div class="w-8">
            <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-4.png" aria-label="User Avatar" />
          </div>
        </div>
        <div class="avatar placeholder">
          <div class="bg-neutral text-neutral-content w-8">
            <span>+3</span>
          </div>
        </div>
      </div>
    </div>
    <hr />
  </li>
  <!-- /timeline item 3-->
</ul>
        </div>
    
    </div>
    <div class="card border border-base-content/10 col-span-full lg:col-span-2">
        <div class="card-body">
            <h2 class="card-title">销售额统计</h2>
            <div x-data="chart(mode)" class="w-full" wire:replace.self></div>
        </div>
    </div>
    
    
    <div class="card border border-base-content/10 col-span-full lg:col-span-2">
        <div class="card-body">
            <h2 class="card-title">员工TOP3</h2>
            <div x-data="chart(mode1)" class="w-full" wire:replace.self></div>
        </div>
        
    </div>

    <div class="card border border-base-content/10 col-span-full lg:col-span-1">
        <div class="card-body">
            <h2 class="card-title">分类比例</h2>
            <div x-data="chart(mode2)" class="w-full" wire:replace.self></div>
        </div>
        
    </div>
</div>

@push('scripts')
@vite(['resources/js/apexcharts.js'])
<script>
    var mode = {
      chart: {
        height: 400,
        type: 'area',
        toolbar: {
          show: false
        },
        zoom: {
          enabled: false
        }
      },
      series: [
        {
          name: '合计',
          data: [0, 100, 50, 125, 70, 150, 100, 170, 120, 175, 100, 200]
        }
      ],
      legend: {
        show: false
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'straight',
        width: 2
      },
      grid: {
        strokeDashArray: 2,
        borderColor: 'oklch(var(--bc) / 0.4)'
      },
      colors: ['oklch(var(--p))'], // color var
      fill: {
        type: 'gradient',
        gradient: {
          shadeIntensity: 1,
          opacityFrom: 0.7,
          gradientToColors: ['oklch(var(--b1))'],
          opacityTo: 0.3,
          stops: [0, 90, 100]
        }
      },
      xaxis: {
        type: 'category',
        tickPlacement: 'on',
        categories: [
          '3月 1日 2024',
          '3月 2日 2024',
          '3月 3日 2024',
          '3月 4日 2024',
          '3月 5日 2024',
          '3月 6日 2024',
          '3月 7日 2024',
          '3月 8日 2024',
          '3月 9日 2024',
          '3月 10日 2024',
          '3月 11日 2024',
          '3月 12日 2024'
        ],
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        },
        tooltip: {
          enabled: false
        },
        labels: {
          style: {
            colors: 'oklch(var(--bc) / 0.9)',
            fontSize: '12px',
            fontWeight: 400
          },
          formatter: title => {
            let t = title

            if (t) {
              const newT = t.split(' ')
              t = `${newT[0]} ${newT[1].slice(0, 3)}`
            }

            return t
          }
        }
      },
      yaxis: {
        labels: {
          align: 'left',
          minWidth: 0,
          maxWidth: 140,
          style: {
            colors: 'oklch(var(--bc) / 0.9)',
            fontSize: '12px',
            fontWeight: 400
          },
          formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
        }
      },
      tooltip: {
        x: {
          format: 'MMMM yyyy'
        },
        y: {
          formatter: value => `${value >= 1000 ? `${value / 1000}k` : value}`
        },
        custom: function (props) {
          const { categories } = props.ctx.opts.xaxis
          const { dataPointIndex } = props
          const title = categories[dataPointIndex].split(' ')
          const newTitle = `${title[0]} ${title[1]}`

          return ApexChartsHelper.buildTooltip(props, {
            title: newTitle,
            mode,
            valuePrefix: '',
            hasTextLabel: true,
            markerExtClasses: 'bg-primary',
            wrapperExtClasses: ''
          })
        }
      },
      responsive: [
        {
          breakpoint: 568,
          options: {
            chart: {
              height: 300
            },
            labels: {
              style: {
                fontSize: '10px',
                colors: 'oklch(var(--bc) / 0.9)'
              },
              offsetX: -2,
              formatter: title => title.slice(0, 3)
            },
            yaxis: {
              labels: {
                align: 'left',
                minWidth: 0,
                maxWidth: 140,
                style: {
                  fontSize: '10px',
                  colors: 'oklch(var(--bc) / 0.9)'
                },
                formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
              }
            }
          }
        }
      ]
    }

    var mode1 = {
        chart: {
          height: 350,
          type: "line",
          toolbar: {
            show: false
          },
          zoom: {
            enabled: false
          }
        },
        series: [
          {
            name: "独孤求败",
            data: [0, 17000, 35000, 23000, 40000]
          },
          {
            name: "西门吹雪",
            data: [0, 15000, 19000, 32500, 27000]
          },
          {
            name: "东方不败",
            data: [0, 12000, 16000, 20000, 30000]
          }
        ],
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: "straight",
          width: [4, 4, 4]
        },
        title: {
          show: false
        },
        legend: {
          show: true,
          position: "top",
          horizontalAlign: "right",
          labels: {
            useSeriesColors: true
          },
          markers: {
            offsetY: 2
          }
        },
        grid: {
          strokeDashArray: 0,
          borderColor: "oklch(var(--bc) / 0.4)",
          padding: {
            top: 0,
            right: 0,
            bottom: 10
          }
        },
        colors: ["oklch(var(--p))", "oklch(var(--su))", "oklch(var(--er))"],
        xaxis: {
          type: "category",
          categories: ["1 January 2024", "1 February 2023", "1 March 2023", "1 April 2023", "1 May 2023"],
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false
          },
          tooltip: {
            enabled: false
          },
          labels: {
            offsetY: 5,
            style: {
              colors: "oklch(var(--bc) / 0.9)",
              fontSize: "12px",
              fontWeight: 400
            },
            formatter: title => {
              let t = title

              if (t) {
                const newT = t.split(" ")
                t = `${newT[0]} ${newT[1].slice(0, 3)}`
              }

              return t
            }
          }
        },
        yaxis: {
          min: 0,
          max: 40000,
          tickAmount: 4,
          labels: {
            align: "left",
            minWidth: 0,
            maxWidth: 140,
            style: {
              colors: "oklch(var(--bc) / 0.9)",
              fontSize: "12px",
              fontWeight: 400
            },
            formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
          }
        },
        tooltip: {
          custom: function (props) {
            const { categories } = props.ctx.opts.xaxis
            const { dataPointIndex } = props
            const title = categories[dataPointIndex].split(" ")
            const newTitle = `${title[0]} ${title[1]}`

            return ApexChartsHelper.buildTooltip(props, {
              title: newTitle,
              mode,
              hasTextLabel: true,
              wrapperExtClasses: "min-w-36",
              labelDivider: ":",
              labelExtClasses: "ms-2"
            })
          }
        }
      }
    const mode2 = {
        chart: {
          height: 300,
          type: "donut"
        },
        plotOptions: {
          pie: {
            donut: {
              size: "70%",
              labels: {
                show: true,
                name: {
                  fontSize: "2rem"
                },
                value: {
                  fontSize: "1.5rem",
                  color: "oklch(var(--bc) / 0.9)",
                  formatter: function (val) {
                    return parseInt(val, 10) + "%"
                  }
                },
                total: {
                  show: true,
                  fontSize: "1rem",
                  label: "Operational",
                  formatter: function (w) {
                    return "42%"
                  }
                }
              }
            }
          }
        },
        series: [42, 7, 25, 25],
        labels: ["Operational", "Networking", "Hiring", "R&D"],
        legend: {
          show: true,
          position: "bottom",
          markers: { offsetX: -3 },
          labels: {
            useSeriesColors: true
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: false,
          curve: "straight"
        },
        colors: ["oklch(var(--p))", "oklch(var(--su))", "oklch(var(--er))", "oklch(var(--n))"],
        states: {
          hover: {
            filter: {
              type: "none"
            }
          }
        },
        tooltip: {
          enabled: true
        }
      }
</script>
@endpush


